<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="include::head"></head>
<body>
<div class="layui-anim layui-anim-upbit layui-fluid">
    <div class="layui-row layui-col-space15 table-search">
        <div class="layui-col-md12">
            <form class="layui-form" id="from-search">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="请输入用户名" name="loginAccount" autocomplete="off">
                    </div>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="请输入昵称" name="nickname" autocomplete="off">
                    </div>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="请输入真实姓名" name="userName" autocomplete="off">
                    </div>

                    <button class="layui-btn" id="form-submit" lay-submit  lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <button class="layui-btn" lay-filter="refresh">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </button>

                </div>
            </form>
            <div class="layui-btn-group" lay-filter="button-demo">
                <th:block th:each="button : ${button}" th:if="${button.type == 'tool_button'}">
                    <th:block th:if="${button.eventType == 'event_export'}">
                        <a th:class="${button.perClass +' '+ button.eventType}" th:href="${button.perHref}" th:utext="${button.perName}"></a>
                    </th:block>
                    <th:block th:if="${button.eventType != 'event_export'}">
                        <button th:class="${button.perClass +' '+ button.eventType}" th:href="${button.perHref}" th:value="${button.perName}" th:utext="${button.perName}"></button>
                    </th:block>
                </th:block>
            </div>

            <table class="layui-hide" id="table" lay-filter="demo"></table>
        </div>
    </div>
</div>
<div th:include="include::onload"></div>

<script type="text/html" id="barDemo">
    <button th:each="button : ${button}" th:if="${button.type == 'menu_button'}" th:class="${button.perClass}" th:href="${button.perHref}" th:lay-event="${button.eventType}" th:value="${button.perName}" th:utext="${button.perName}"><i th:class="${button.perIcon}"></i></button>
</script>

<script  th:inline="javascript">
    layui.config({
        base: '/js/layer/module/'//模块存放的目录
    }).use(['tabular'], function(){
        var tabular = layui.tabular,
             url = "/admin/monitor/online",
             options = {
                elem: '#table',
                url:url,
                onlyId:"id",
                method:'post',
                id:'onlin-table',
                height: 'full-150',
                cellMinWidth: 220,
                cols:[
                    [
                        {type:'checkbox', fixed: 'left'},
                        {type:'numbers',title: '序号', fixed: 'left'}
                        ,{field:'id',fixed: 'left',title: 'SessionId', sort: true}
                        ,{field:'loginAccount',title: '用户名',sort: true}
                        ,{field:'nickname', title: '昵称',sort: true}
                        ,{field:'userName', title: '真实姓名'}
                        ,{field:'logLocation', title: '登陆地址'}
                        ,{field:'ip', title: '登陆IP'}
                        ,{field:'loginDate', title: '登陆时间', sort: true,templet: function (option) {
                            return $.date.stringDate(option.loginDate);
                        }}
                        ,{field:'date', title: '最后操作时间',fixed: 'right', sort: true,templet: function (option) {
                            return $.date.stringDate(option.date);
                        }}
                        ,{width:'10%', align:'center',fixed: 'right', toolbar: '#barDemo'}
                    ]
                ],
                ispage:false
            };
        //初始化表格
        tabular.init(options);
        //监听搜索
        tabular.search();
        //工具按钮监听
        tabular.button();
    });
</script>
</body>
</html>